<template>
  <el-dialog title="编辑菜单" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="版本" prop="version">
        <el-input v-model="form.version"></el-input>
      </el-form-item>
       <el-form-item label="状态" prop="statuz">
        <el-radio-group v-model="form.statuz">
          <el-radio-button label="使用中" />
          <el-radio-button label="已过期" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio-button label="android" />
          <el-radio-button label="ios" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文件">
       <el-upload
          class="upload-demo"
          drag
          :action="action"
          :on-success="success"
          :file-list="fileList"
          :on-preview="handlePreview"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('editForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { baseUrl } from "@/config/env";
const urls = {
  checkField: baseUrl + "/zweixin/common/check_unique_notme", // 验证编码唯一性
  save: baseUrl + "/zweixin/app/edit", // 保存
  get: baseUrl + "/zweixin/app/get",
  upload: baseUrl + "/zweixin/upload",
  download: baseUrl + "/zweixin/download",
};
export default {
  data() {
    return {
      dialogVisible: false,
      super_menu: {
        code: ""
      },
       fileList: [],
        action:urls.upload,
      form: {
        kid: null,
        name: null,
        version:null,
        file_id:null,
        type: null,
      },
      rules: {
         name: [{ required: true, message: "没有上传文件", trigger: "blur" }],
        statuz: [{ required: true, message: "请选择状态", trigger: "blur" }],
        file_id: [{ required: true, message: "请上传文件", trigger: "blur" }],
        version: [{ required: true, message: "请填写版本号", trigger: "blur" }],
         type: [{ required: true, message: "请选择类型", trigger: "blur" }]
      }
    };
  },
  methods: {
    show(kid) {
      this.dialogVisible = true;
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
      this.fetch(kid);
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.code = this.super_menu.code + this.form.code;
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    },
    fetch(kid) {
      this.fileList = [];
      axios.get(urls.get, { params: { kid: kid } }).then(res => {
        let data = res.data.result;
        this.form = {
          kid: data.kid,
          name: data.name,
          statuz: data.statuz,
          version: data.version,
          file_id:data.file_id,
          type:data.type
        };
        this.fileList.push({name:data.file_name,url:urls.download+"/"+data.file_id});
      });
    },
     handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            window.location.href = file.url;
        },
        success(response, file, fileList){
          this.fileList = [];
            var name = response.name;
            var url = urls.download +"/"+response.file_id;
             this.fileList.push({name:name,url:url});
            this.form.file_id = response.file_id;
            this.form.name = response.name;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        }
  }
};
</script>